<template>
    <div class="main-body">
        <!--工具栏-->
        <div class="toolbar">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.operator" :placeholder="t('thead.operator')"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="search" type="primary" @click="findPage">{{ t('action.search') }}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格内容栏-->
        <cm-table ref="tableRef" :get-page="listPage" :filters="filters" :columns="columns" :showOperation="false"
            :showBatchDelete="false"></cm-table>
    </div>
</template>
  
<script setup>
import { listPage } from '@/apis/logs-operation'

const { t } = useI18n();
const tableRef = ref();

// 获取分页数据
function findPage() {
    tableRef.value.reload();
}
const filters = reactive({
    operator: ''
});

const columns = computed(() => [
    { prop: "id", label: t("thead.ID"), minWidth: 60 },
    { prop: "operator", label: t("thead.operator"), minWidth: 100 },
    { prop: "ip", label: t("thead.IP"), minWidth: 120 },
    { prop: "operation", label: t("thead.operation"), minWidth: 180 },
    { prop: "duration", label: t("thead.duration"), minWidth: 80 },
    { prop: "createdTime", label: t("thead.operationTime"), minWidth: 120 }
])
</script>